<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 19:18:25
-->
<template>
  <div ref="root" style="height:150px">
    
  </div>
</template>
<script>
import { Rose } from '@antv/g2plot';
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initCharts();
  },
  methods:{
    initCharts(){
      const data = [
        { type: '业务一', value: 27 },
        { type: '业务二', value: 25 },
        { type: '业务三', value: 18 },
        { type: '业务四', value: 15 },
        { type: '业务五', value: 10 },
        { type: '其他', value: 5 },
      ];
      let rose = new Rose(this.$refs['root'],{
          data,
  xField: 'type',
  yField: 'value',
  seriesField: 'type',
  radius: 0.9,
  legend: {
    position: 'bottom',
  },
      });
      //渲染
      rose.render();
    }
  }
}
</script>